<template>
  <div class="dataset-create-container">
    <div class="dataset-create">
      <h1>{{createByOutput ? '生成' : '上传'}}数据集</h1>
      <div class="content">
        <el-form label-position="top" class="form" :model="datasetForm" :rules="rulesForm" ref="datasetForm" @submit.native.prevent>
          <div class="content-header">
            <div class="form-left">
              <el-form-item prop="name">
                <div class="title">数据集名称：</div>
                <el-input class="input" v-model="datasetForm.name" autocomplete="off" placeholder="名称不能重复，并可以包含字母、数字、横线或下划线"></el-input>
              </el-form-item>
              <el-form-item prop="desc">
                <div class="title">简介：</div>
                <el-input class="input" v-model="datasetForm.desc" autocomplete="off" placeholder="一句话简单介绍数据集"></el-input>
              </el-form-item>
            </div>
            <div class="form-right">
              <el-form-item prop="img">
                <div class="title">封面图片：</div>
                <el-upload
                  ref="picUploader"
                  class="upload"
                  :drag="true"
                  :limit="1"
                  action="/gateway/fileCenter/api/file/qiniu/upload"
                  :headers="uploadHeader"
                  :on-change="handleImgChange"
                  :on-exceed="handleExceed"
                  :before-upload="handleBeforeUpload"
                  accept="image/*"
                >
                  <div class="pic-uploader">
                    <img src="@/common/image/icon/icon-dataset-upload.png">
                    <div class="pic-uploader-text">
                      <p class="title">上传图片</p>
                      <p class="text">支持JPEG，JPG，PNG，大小不超过3M</p>
                    </div>
                  </div>
                </el-upload>
              </el-form-item>
            </div>
          </div>
          <div class="dataset-tag">
            <el-form-item prop="tag">
              <div class="title">
                标签：
                <span class="dataset-create-navs-detail-selected" v-for="item in selectedCategory" :key="item.id">{{item.name}}<i class="el-icon-close" @click="removeSelectedCategory(item.id)"></i></span>
                <el-popover
                  placement="bottom-start"
                  trigger="manual"
                  v-model="labelVisible"
                  width="800">
                  <div class="dataset-create-popover">
                    <ul class="navs-detail-left">
                      <li class="item" :class="{ 'active': openAllLabelIndex == index}" v-for="(item, index) in openAllLabel" :key="index" @click="showSeLabel(index)">{{item.name}}</li>
                    </ul>
                    <ul class="navs-detail-right">
                      <li class="items" v-for="(item, index) in openAllLabelShow" :key="index">
                        <h4 class="tit">{{item.name}}</h4>
                        <ul class="detail-items">
                          <li class="detail-item" v-for="(list, num) in item.childList" :key="num" @click="selectFilterLabel(list)">{{list.name}}</li>
                        </ul>
                      </li>
                    </ul>
                  </div>
                  <div class="dataset-create-navs-detail" slot="reference" @click="clickAddCategory">
                    <a class="dataset-create-navs-detail-more">+ 添加</a>
                  </div>
                </el-popover>
              </div>
            </el-form-item>
          </div>
          <div class="content-upload">
            <div class="title">数据集文件：</div>
            <div class="upload-action">
              <span>
                <el-button size="medium" class="action-button" @click="clickUploadFile"><i class="icon"></i>上传文件</el-button>或 <a class="right-text-link" @click="clickUploadFolder">上传文件夹</a>
              </span>
              <span>
                <el-popover
                  placement="top-start"
                  width="200"
                  trigger="hover">
                  <div>
                    <p>如果需要上传超大数据集，请联系管理人员进行上传。</p>
                    <p>管理员微信号：leinao1</p>
                  </div>
                  <a slot="reference" @click="test">查看如何上传超大数据集</a>
                </el-popover>
              </span>
            </div>
            <div class="file-panel" v-if="showCreateByOutput">
              <div class="file-list">
                <ul class="file-item">
                  <li class="file-type">
                    <i class="icon-folder"></i>
                  </li>
                  <li class="file-name">Outputs</li>
                  <li class="file-size">-</li>
                  <li class="file-del" @click="removeOutput"><i class="el-icon-close"></i></li>
                </ul>
              </div>
            </div>
            <div class="file-panel" v-if="showCreateByFile">
              <div class="file-list">
                <ul class="file-item" v-for='(item, index) in saveDatasetFile' :key="index">
                  <li class="file-type" v-if="item.directory">
                    <i class="icon-folder"></i>
                  </li>
                  <li class="file-type" v-else>
                    <i class="el-icon-document"></i>
                  </li>
                  <li class="file-name">{{item.fileName}}</li>
                  <!-- <li class="file-size">{{new Date(item.updateTime).Format("yyyy-MM-dd hh:mm")}}</li> -->
                  <li class="file-size">{{item.size ? item.size : '-'}}</li>
                  <li class="file-del" style="opacity: 0"><i class="el-icon-close"></i></li>
                </ul>
              </div>
            </div>
            <div class="file-panel" v-show="uploadFileList.length > 0">
              <div class="file-list">
                <ul class="file-item" :class="`file-${file.id}`" v-for="(file, index) in uploadFileList" :key="index">
                  <li class="file-type">
                    <i class="el-icon-document"></i>
                  </li>
                  <li class="file-name">{{file.name}}</li>
                  <li class="file-size">{{fileSize(file.size)}}</li>
                  <!-- <li class="file-status">待上传</li> -->
                  <li class="progress"></li>
                  <li class="file-del" @click="singleRemoveFile(file, index)"><i class="el-icon-close"></i></li>
                </ul>
                <div class="no-file" v-if="!uploadFileList.length"><i class="iconfont icon-empty-file"></i> 暂无待上传文件</div>
              </div>
            </div>
            <!--<a-upload-dragger
              ref="ss"
              multiple
              directory
              name="file"
              :fileList="fileList"
              :remove="handleRemove"
              :beforeUpload="beforeUpload">
              <p class="ant-upload-text"><img src="@/common/image/icon/icon-dataset-upload.png">点击选择文件夹或拖拽文件、文件夹到这里上传</p>
              <div class="content-upload-tips">
                <el-popover
                  placement="top-start"
                  width="200"
                  trigger="hover">
                  <div>
                    <p>如果需要上传超大数据集，请联系管理人员进行上传。</p>
                    <p>联系方式：0551-00000000</p>
                  </div>
                  <a slot="reference" @click="test">查看如何上传超大数据集</a>
                </el-popover>
              </div>
            </a-upload-dragger>-->
          </div>
        </el-form>
        <div class="footer-button" ><el-button type="primary" @click="submitDataSet('datasetForm')">提交数据集</el-button></div>
      </div>
    </div>
    <div class="project-mask" v-show="labelVisible" @click="labelVisible=!labelVisible"></div>
    <!-- 上传文件组件 -->
    <div id="filePicker" class="upload-location">上传数据集文件</div>
    <vue-upload
      ref="uploader"
      uploadButton="#filePicker"
      url="/gateway/fileCenter/api/file/upload?type=3"
      multiple
      :headers="uploadHeader"
      @fileChange="fileChange"
      :fileSingleSizeLimit="fileSingleSize"
      :fileNumLimit="$route.query.createByOutput ? 20 : 500"
      :fileSizeLimit="fileSizeLimit"
      @uploadStart="onUploadStart"
      @progress="onProgress"
      @complete="onOnceSuccess"
      @completeAll="onAllSuccess"
      @error="onError"
    ></vue-upload>
    <el-dialog
      title=""
      :visible.sync="dialogUploadProcessVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal="false"
      :show-close="false"
      :lock-scroll="true"
      width="30%">
      <div class="progress-box">
        <el-progress :width="80" type="circle" :percentage="Number(totalProgress)" class="progress-circle"></el-progress>
        <p>正在努力上传数据，请稍后</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { copyOutputFile, copyFilesToDataSetOrModel } from '@/api/filecenter'
import { dataSet } from '@/api/dataset'
import { getCategoryTreeByType, saveCategoryRelationList } from '@/api/category'
import store from '@/store.js'
import { mapMutations } from 'vuex'
import axios from 'axios'
import vueUpload from '@/base/vue-upload'

const WebUploaderObj = window.WebUploader
export default {
  components: {
    vueUpload
  },
  data () {
    var validateName = (rule, value, callback) => {
      var reg1 = /^[a-zA-Z0-9_-]*$/
      var reg2 = /^[a-zA-Z0-9]{1}[a-zA-Z0-9_-]*$/
      if (!reg1.test(value)) {
        callback(new Error('项目名称仅支持字母、数字、横线和下划线'))
      } else if (!reg2.test(value)) {
        callback(new Error('数据集名称须以字母或数字开头'))
      } else {
        callback()
      }
    }
    const validateImg = (rule, value, callback) => {
      const uploadedImg = this.$refs.picUploader.uploadFiles
      if (uploadedImg.length < 1) {
        callback(new Error('请上传封面图片'))
      } else {
        callback()
      }
    }
    const validateTag = (rule, value, callback) => {
      if (this.selectedCategory.length < 1) {
        callback(new Error('请选择数据集所属标签'))
      } else {
        callback()
      }
    }
    return {
      // 标签集合显示
      labelVisible: false,
      // 标签树分类 index
      openAllLabelIndex: 0,
      uploadType: false,
      datasetForm: {
        name: '',
        desc: ''
      },
      // 表单校验规则
      rulesForm: {
        name: [
          { required: true, message: '请输入数据集名称', trigger: 'blur' },
          { validator: validateName },
          { max: 50, message: '名称长度须在1到50个字符之间' }
        ],
        desc: [
          { required: true, message: '请简要介绍该数据集', trigger: 'blur' },
          { max: 100, message: '简介内容不能超过100个字符' }
        ],
        img: [
          { validator: validateImg }
        ],
        tag: [
          { validator: validateTag }
        ]
      },
      // 标签分类树信息
      openAllLabel: [],
      // 标签树分类显示
      openAllLabelShow: [],
      // 已选标签
      selectedCategory: [],
      // 选中标签的筛选条件信息
      selectionLabel: {
        id: '',
        name: ''
      },
      fileList: [],
      fileTotalSize: 0,
      isSupportDir: true,
      // 上传文件大小限制
      fileSingleSize: 500 * 1024 * 1024,
      // 所有文件
      fileSizeLimit: 500 * 1024 * 1024,
      fileNumLimit: 500,
      flag: false,
      // 上传文件列表
      uploadFileList: [],
      // 上传状态
      uploadStatus: {},
      // 上传总进度
      totalProgress: 0,
      dialogUploadProcessVisible: false,
      createByOutput: false,
      showCreateByOutput: false,
      // 文件中心 --> 创建数据集
      showCreateByFile: false,
      saveDatasetFile: []
    }
  },
  mounted () {
    this.createByOutput = this.$route.query.createByOutput
    this.showCreateByFile = this.$route.query.createByFile
    if (this.createByOutput) {
      this.fileNumLimit = 2
    }
    if (this.showCreateByFile) {
      this.saveDatasetFile = JSON.parse(sessionStorage.getItem('saveDatasetFile'))
    }
    this.showCreateByOutput = this.$route.query.createByOutput
    this._getCategoryTreeByType()
  },
  methods: {
    // 移除Output
    removeOutput () {
      this.showCreateByOutput = false
    },
    // 点击上传文件-选择文件
    clickUploadFile () {
      if (this.flag) this.uploader.reset()
      this.flag = false
      document.getElementById('filePicker').getElementsByTagName('input')[0].removeAttribute('webkitdirectory')
      document.getElementById('filePicker').getElementsByTagName('label')[0].click()
    },
    // 点击上传文件-选择文件夹
    clickUploadFolder () {
      if (this.flag) this.uploader.reset()
      this.flag = false
      document.getElementById('filePicker').getElementsByTagName('input')[0].setAttribute('webkitdirectory', '')
      document.getElementById('filePicker').getElementsByTagName('label')[0].click()
    },
    // 获取文件大小
    fileSize (size) {
      return WebUploaderObj.Base.formatSize(size)
    },
    // 上传错误
    onError (msg) {
      this.uploadFileList = []
      this.flag = true
      this.$message({ message: msg, showClose: true, type: 'warning' })
    },
    // 开始上传
    startUpload () {
      this.resume()
    },
    cancleUpload () {
      this.uploader.reset()
    },
    closeUploadDialog () {
      this.uploader.reset()
    },
    fileChange (file) {
      if (!this.flag) {
        this.uploadFileList.push(file)
      }
    },
    // 删除文件
    singleRemoveFile (file, index) {
      this.uploadFileList.splice(index, 1)
      this.uploader.removeFile(file)
    },
    onUploadStart (file) {
      let fileDir = ''
      let source = file.source.source
      const rootDir = `/${this.datasetForm.name}`
      if (source.webkitRelativePath) {
        fileDir = rootDir + '/' + source.webkitRelativePath.slice(0, source.webkitRelativePath.lastIndexOf('/' + source.name))
      } else {
        fileDir = rootDir
      }
      let formData = {
        'dir': fileDir
      }
      this.uploader.uploader.options.formData = formData
    },
    // uploadBeforeSend (obj, file, headers) {
    //   console.log(headers)
    // },
    onProgress (file, percent) {
      /*
        组件上传进度并不准确，只是说明组件发送文件的进度，可能网络传输和后端仍然在处理中
        暂时处理方式是将进度100%改写为99%，待上传完成时再将进度置为100%
      */
      const uploadStatus = this.uploader.getStats()
      let _percent = percent
      if (Number(_percent.toFixed(2)) === 1.00) {
        _percent = 0.99
      }
      $(`.file-${file.id} .progress`).css('width', _percent * 100 + '%')
      $(`.file-${file.id} .file-status`).html((_percent * 100) + '%')
      if (uploadStatus.queueNum === 0 && uploadStatus.successNum === 0) {
        this.totalProgress = (_percent * 100).toFixed(2)
      } else {
        const totalPercent = (((uploadStatus.successNum / (uploadStatus.successNum + uploadStatus.queueNum)) + (1 / (uploadStatus.successNum + uploadStatus.queueNum)) * _percent) * 100).toFixed(2)
        this.totalProgress = Number(totalPercent) > 100 ? 100 : totalPercent
      }
    },
    onOnceSuccess (file, res) {
      $(`.file-${file.id} .progress`).css('width', '100%')
      $(`.file-${file.id} .file-status`).html('100%')
    },
    onAllSuccess () {
      this.dialogUploadProcessVisible = false
      this.$message({ message: '上传数据集成功', showClose: true, type: 'success' })
      const obj = {
        isDataSet: true,
        state: 'myDataSet'
      }
      this.storeDataSet(obj)
      this.$router.push({ path: '/dataset', query: { active: 2 } })
    },
    resume (file) {
      this.uploader.upload(file)
    },
    test (e) {
      e.stopPropagation()
    },
    // 上传图片类型大小判断
    handleBeforeUpload (file) {
      const isImage = file.type.indexOf('image/') > -1
      const isLt3M = file.size / 1024 / 1024 < 3
      if (!isImage) {
        this.$message.error('请选择图片上传')
      }
      if (!isLt3M) {
        this.$message.error('上传头像图片大小不能超过 3MB!')
      }
      return isImage && isLt3M
    },
    handleImgChange () {
      this.$refs['datasetForm'].validate()
    },
    handleExceed () {
      this.$message({ message: '请选择一张封面图片上传', showClose: true, type: 'error' })
    },
    handleRemove (file) {
      this.fileTotalSize = this.fileTotalSize - file.size
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
    },
    beforeUpload (file) {
      this.fileTotalSize = this.fileTotalSize + file.size
      if (this.fileTotalSize > 500 * 1024 * 1024) {
        this.$message({ message: '上传的文件大小须在500M以内', showClose: true, type: 'warning' })
      } else if (this.fileList.length > 500) {
        this.fileList = []
        this.$message({ message: '总文件数量须在500个以内', showClose: true, type: 'warning' })
      } else {
        this.fileList = [...this.fileList, file]
      }
      return false
    },
    clickAddCategory () {
      if (this.selectedCategory.length === 3) {
        this.$message({ message: '最多添加3个标签', showClose: true, type: 'warning' })
        return false
      } else {
        this.labelVisible = !this.labelVisible
      }
    },
    /*
      表单提交(cffForm：创建文件夹;renameForm：重命名)
      提交步奏:1、创建数据集 -> 2、保存关联标签 -> 3、上传文件
    */
    submitDataSet (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogUploadProcessVisible = true
          this._uploadDataSet()
        } else {
          return false
        }
      })
    },
    // 重置表单
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 显示二级标签内容
    showSeLabel (index) {
      this.openAllLabelIndex = index
      this.openAllLabelShow = this.openAllLabel[index].childList
    },
    // 选中过滤标签
    selectFilterLabel (item) {
      this.labelVisible = false
      const checkExist = this.selectedCategory.find(el => {
        return item.id === el.id
      })
      if (checkExist === undefined) {
        this.selectedCategory.push(item)
      }
      this.$refs['datasetForm'].validate()
    },
    // 移除选中标签
    removeSelectedCategory (id) {
      const removeIndex = this.selectedCategory.findIndex(el => {
        return el.id === id
      })
      this.selectedCategory.splice(removeIndex, 1)
    },
    /*
      -----接口调用-----
    */
    // 获取分类树信息
    _getCategoryTreeByType () {
      const type = 1
      getCategoryTreeByType(type).then(res => {
        if (res.message.code === 0) {
          this.openAllLabel = res.data
          if (res.data.length > 0 && res.data[0].childList) this.openAllLabelShow = res.data[0].childList
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 提交数据集
    _uploadDataSet () {
      let data = {}
      data.name = this.datasetForm.name
      data.profile = this.datasetForm.desc
      data.path = `/datasets/${this.datasetForm.name}`
      let para = ''
      let uploadFiles = this.$refs.picUploader.uploadFiles
      if (uploadFiles.length > 0) {
        let arr = uploadFiles.map(item => {
          return item.response.data.id
        })
        para = `?id=${arr.toString()}`
      }
      dataSet(data, para).then(res => {
        if (res.message.code === 0) {
          // 判断是否通过output生成数据集
          if (this.showCreateByOutput) {
            const query = `?projectId=${this.$route.query.projectId}&jobName=${this.$route.query.jobName}&dir=/${this.datasetForm.name}`
            copyOutputFile(query).then(subRes => {
              if (res.message.code !== 0) {
                this.$message({ message: res.message.message, showClose: true, type: 'error' })
              }
            })
          }
          // 判断是否文件中心 创建数据集
          if (this.showCreateByFile) {
            let query = `?type=1&targetDir=/${this.datasetForm.name}`
            this.saveDatasetFile.forEach(item => {
              query += `&dirs=${item.path}`
            })
            copyFilesToDataSetOrModel(query).then(fileRes => {
              if (res.message.code !== 0) {
                this.$message({ message: res.message.message, showClose: true, type: 'error' })
              }
            })
          }
          // 数据集创建成功后开始保存关联标签
          this._saveCategory(res.data)
        } else {
          this.dialogUploadProcessVisible = false
          if (res.message.code === 20007) {
            this.$message({ message: '数据集名称重复', showClose: true, type: 'warning' })
          } else {
            this.$message({ message: res.message.message, showClose: true, type: 'error' })
          }
        }
      })
    },
    // 保存分类
    _saveCategory (datasetId) {
      let data = {}
      data.objId = datasetId
      data.type = 2
      data.categoryRelationList = []
      this.selectedCategory.map(item => {
        const addItem = {
          categoryId: item.id
        }
        data.categoryRelationList.push(addItem)
      })
      saveCategoryRelationList(data).then(res => {
        if (res.message.code === 0) {
          // 完成保存标签后开始上传文件
          // this._handleUpload()
          this.resume()
        } else {
          this.dialogUploadProcessVisible = false
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 上传文件
    _handleUpload () {
      const { fileList } = this
      let _this = this
      let formData = new FormData()
      const fileUrl = '/gateway/fileCenter/api/file/upload'
      // 异步函数
      function async (file, fn) {
        // 拼接文件路径
        const rootDir = `/${_this.datasetForm.name}`
        let fileDir = ''
        // 具有webkitRelativePath属性及多级文件路径进行处理
        if (file.webkitRelativePath) {
          if (file.webkitRelativePath.indexOf('/') !== 0) {
            fileDir = rootDir + '/'
          }
        } else {
          fileDir = rootDir
        }
        formData.delete('file')
        formData.delete('dir')
        formData.delete('type')
        formData.append('dir', fileDir)
        formData.append('file', file)
        formData.append('type', 3)
        axios({
          method: 'post',
          url: fileUrl,
          headers: { 'Content-Type': 'multipart/form-data' },
          data: formData
        }).then(res => {
          fn()
          // _this.$message({ message: '上传文件成功', showClose: true, type: 'success' })
        }).catch(error => {
          console.log('error', error)
        })
      }
      (function next (i, len, callback) {
        if (i < len) {
          async(fileList[i], function (value) {
            next(i + 1, len, callback)
          })
        } else {
          callback()
        }
      })(0, fileList.length, function () {
        _this.dialogUploadProcessVisible = false
        _this.$message({ message: '上传数据集成功', showClose: true, type: 'success' })
        const obj = {
          isDataSet: true,
          state: 'myDataSet'
        }
        _this.storeDataSet(obj)
        _this.$router.push({ path: '/dataset', query: { active: 2 } })
      })
    },
    ...mapMutations({
      storeDataSet: 'Set_Task_Data_Set'
    })
  },
  computed: {
    // WebUploader对象
    uploader () {
      return this.$refs.uploader
    },
    // 图片上传header
    uploadHeader: () => {
      let obj = {
        token: store.state.userInfo.token,
        bitaToken: store.state.userInfo.bitaToken,
        userId: store.state.userInfo.userId
      }
      return obj
    }
  }
}
</script>

<style lang="stylus">
@import "../../common/stylus/core/dataset-create"
.dataset-create-container
  width 100%
  background #ffffff!important
  .upload-location
    display none
  .dataset-create
    position relative
    margin 0 auto
    max-width 836px
    h1
      font-size 24px
      font-weight bold
      height 33px
      line-height 33px
      margin 97px 0 54px
    .content
      .title
        font-size 14px
        font-weight bold
        color #2D323B
      .content-header
        display flex
        justify-content space-between
        .form-left
          display inline-block
          width 48%
        .form-right
          width 48%
          .pic-uploader
            display flex
            height 100%
            background #F4F4F4
            padding 45px 75px
            >img
              width 17px
              height 15px
              margin-right 8px
            .pic-uploader-text
              height 20px
              line-height 20px
              text-align left
              .title
                font-size 14px
                color #2D323B
              .text
                font-size 12px
                color #2A2A2A
      .dataset-tag
        padding 20px 0
      .content-upload
        margin-bottom 20px
        .file-panel
          padding 0
          .icon-folder
            display inline-block
            width 11px
            height 13px
            vertical-align top
            background url(../../common/image/icon/folder.png) no-repeat center
            background-size 11px 13px
        .title
          line-height 40px
          height 40px
        .upload-action
          display flex
          align-items center
          justify-content space-between
          font-size 14px
          .action-button
            margin-right 12px
          .icon
            display inline-block
            width 25px
            height 13px
            vertical-align top
            background url(../../common/image/icon-project/project-edit-box.png) no-repeat center
            background-size 15px 15px
        .ant-upload-text
          padding 50px 0
          font-size 14px
          color #2D323B
          >img
            width 17px
            height 15px
            margin-right 9px
        .content-upload-tips
          position absolute
          bottom -30px
          right 0
        .ant-upload-list
          max-height 200px
          overflow auto
          margin-top 40px
          .ant-upload-list-item
            height auto
    .dataset-summary
      .ql-editor
        height 250px
    .dataset-path
      width 50%
      margin-top 20px
    .footer-button
      display flex
      align-items center
      justify-content center
      padding 40px
  .progress-box
    text-align center
    >p
      font-size 14px
      color #2D323B
      margin-top 18px
  .el-upload-dragger
    width 400px
    height 132px
  .el-form-item
    margin-bottom 10px
  .el-dialog__header
    padding 0
  .el-dialog__body
    padding 25px 20px
  .el-progress__text
    font-size 14px
    color #2E94F9
.dataset-create-popover
  width 100%
  display flex
  .navs-detail-left
    flex 0 0 120px
    padding-top 10px
    background #F4F7F8
    .item
      height 32px
      line-height 32px
      text-indent 10px
      font-size 16px
      font-weight 600
      cursor pointer
      &:hover
        color #2296f3
    .active
      color #2296f3
  .navs-detail-right
    flex 1
    padding-top 10px
    .items
      width 100%
      display flex
      .tit
        flex 0 0 140px
        height 32px
        line-height 32px
        text-align left
        padding 0 10px
        font-size 14px
        font-weight 600
      .detail-items
        flex 1
        font-size 0
        .detail-item
          display inline-block
          padding-left 6px
          padding-right 6px
          height 32px
          line-height 32px
          font-size 14px
          color #333
          cursor pointer
          &:hover
            color #2196f3
.project-mask
  position fixed
  top 68px
  right 0
  bottom 0
  left 0
  z-index 11
  background transparent
.dataset-create-navs-detail-selected
  background #F4F4F4
  border 1px solid #CCCCCC
  border-radius 4px
  font-size 14px
  color #2D323B
  font-weight normal
  padding 6px 14px
  margin-right 14px
  >i
    cursor pointer
    margin-left 5px
.dataset-create-navs-detail
  position relative
  z-index 12
  display inline-block
  .dataset-create-navs-detail-more
    font-size 14px
    color #6E6E6E
    font-weight normal
    background #F4F4F4
    border 1px dashed #CCCCCC
    border-radius 4px
    padding 6px 14px
</style>
